<template>
  <view class="container">
    <view class="head">
      <view class="head-top">
        <image class="logo" src="https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/02ce598ea7824547a34c774945d90de0.png"></image>
        <view class="head-top-right">
          <view class="ai-consult">
            <view class="ai">
              <view class="ai-btn">中兴测绘物资仓库</view>
              <!-- <view class="member">会员中心</view> -->
            </view>
            <view class="consult">
<!--              <view class="consult-btn">
				  <u-button open-type='contact' color="#6c6ceb" :plain="true" text="联系管理员"></u-button>
			  </view> -->
            </view>
          </view>
        </view>
      </view>
      <view class="head-bottom">
        <text class="description">爱惜公司财物，做好登记管理工作</text>
      </view>
    </view>
    <!-- body部分的其他内容 -->
	 <view class="body">
	  <view class="card" v-for="item in cardList" :key="item.id" @click="onCardClick(item)">
		<view class="card-left">
		  <view class="card-title">{{ item.title }}</view>
		  <view class="card-desc">{{ item.desc }}</view>
		</view>
		<view class="card-right">
			<image class="card-img" :src="item.imgUrl"></image>
			<view v-if="item.isHot" class="hot-tag">{{ item.hotInfo }}</view>
	  </view>
	  </view>
	</view>
	
  </view>
</template>

<script>
	export default {
	  data() {
		return {
			cardList: [
				  {
					id: 1,
					name: 'register',
					title: '借用登记',
					desc: '有借有还，再借不难',
					imgUrl: 'https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/7d8f00f4167d43f89c4d7b7f6d6c0472.png',
					pageUrl:'/subPackTask/wzuse/list?tabIndex=0&userIdentity=用户',
					isHot: false,
					hotInfo: ''
				  },
				  {
					id: 2,
					name: 'painting',
					title: '物资管理员',
					desc: '物资管理，责任重大',
					imgUrl: 'https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/2c85fd42efcb43d1bc882af6eabd1f6a.png',
					pageUrl:'/subPackTask/wzuse/glylist?tabIndex=1&userIdentity=管理员',
					isHot: false,
					hotInfo: ''
				  },
				  {
					id: 3,
					name: 'wzList',
					title: '物资列表',
					desc: '人各有责，物各有主',
					imgUrl: 'https://www.zxsl.zxmap.cn/zxch-app/2024/02/29/27bf7df4c99143508fa56ba337bff933.png',
					pageUrl:'/subPackTask/wzuse/wzList',
					isHot: false,
					hotInfo: ''
				  },
				 //  {
					// id: 3,
					// name: 'cook',
					// title: '使用统计图',
					// desc: '上帝视角观察',
					// imgUrl: '/static/logo.png',
					// isHot: false,
					// hotInfo: ''
				 //  },
			]
		};
	  },
	  props: {
		askInfo: String,
		typeName: String
	  },
	  methods: {
		onCardClick(item) {
			console.log(item)
			this.gotoPage(item.pageUrl)
		}
	  }
	};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.head {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  background-color: #ffffff;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
  margin-bottom: 16px;
  /* margin-top: 100rpx; */
}

.head-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  width: 28%;
  height: 6rem;
  max-width: 120px;
  margin-right: 10px;
}

.head-top-right {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
}

.ai-consult {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.ai {
  display: flex;
}

.ai-btn {
  padding: 6px 14px 6px 0px;
  font-weight: bold;
  border-radius: 4px;
  font-size: 18px;
  margin: 8px 0px 0px 10px;
}

.member {
  font-size: 12px;
  color: #f6c244;
  margin-top: 10px;
  flex: 1;
}

.consult {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.consult-btn {
  padding: 6px 10px;
  color: #7369ff;
  font-size: 8px;
  width: 150px;
  text-align: center;
}

.admin-btn {
  padding: 6px 10px;
  background-color: #23c27e;
  color: #ffffff;
  border-radius: 4px;
  font-size: 16px;
  margin-left: 10px;
}

.head-bottom {
  padding: 10px 0;
}

.description {
  font-size: 12px;
  color: #333333;
}

.body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.card {
  display: flex;
  margin-bottom: 10px;
  width: 45%;
  box-shadow: 0px 0px 8px #ccc;
  border-radius: 5px;
  padding: 8px 1px 8px 1px;
  margin-left: 7px;
  margin-right: 8px;
}

.card-left {
  flex: 1;
  padding: 5px;
  display: flex;
  flex-direction: column;
}

.card-title {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.card-desc {
  font-size: 24rpx;
  color: #666;
}

.card-right {
  width: 40%;
  height: 100%;
  object-fit: cover;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.card-img {
  width: 80%;
  max-height: 100rpx;
  object-fit: cover;
  border-radius: 10rpx 0 0 10rpx;
}
.hot-tag {
  position: absolute;
  top: -12px;
  right: -8px;
  background-color: #ff4444;
  color: #fff;
  font-size: 8px;
  padding: 4px 8px;
  border-radius: 5px;
  z-index: 10;
}
</style>